<template>
	<view>
		<view class="">
			<view class="menu">
				<view class="menu-wrap">
					<text @click="go('1')" :class="{active: activeId == '1'}">全部</text>
					<text @click="go('2')" :class="{active: activeId == '2'}">出租中</text>
					<text @click="go('3')" :class="{active: activeId == '3'}">己完成</text>
					<text @click="go('4')" :class="{active: activeId == '4'}">已取消</text>
				</view>
			</view>
			<!-- <view class="placeholder-box"></view> -->
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="list-wrap">
				<view class="list-box">
					<view class="list-item-box" v-for="(item,index) in result" :key="index">
						<view class="top">
							<!-- <text class="order-type">{{item.type}}</text> -->
							<text class="time">{{item.create_time}}</text>
							<text class="satus">{{item.order_status}}</text>
						</view>
						<view class="goods-box">
							<view class="goods-item clear">

								<view class="goods-img">
									<image :src="item.thumb_image">
								</view>

								<view class="goods-info">
									<view class="t">
										<text>{{item.goods_array.title}}</text>
										<!-- <text>￥{{item.price}}</text> -->
									</view>
									<view class="b">
										<!-- <text>{{item.spec}}</text> -->
										<text>预估收益￥{{item.shouyi_yu}}</text>
									</view>
								</view>

							</view>

						</view>
					</view>

				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	export default {
		mixins: [MescrollMixin],
		components:{
			MescrollBody,MescrollUni
		},
		data() {
			return {
				activeId: 1,
				result: []
			};
		},
		onLoad(options){
			
		},
		// onBackPress(e) {
		// 	//this.$utils.switchTab('ucenter/index');
		// 	this.$utils.navigateTo('ucenter/index');
		// 	return true;
		// },
		methods: {
			go(id){
				this.activeId = id;
				this.result = []
				this.mescroll.triggerDownScroll();
			},
			cancel(order_id){
				this.$utils.showLoading();
				
				this.$http.getOrderListCancel({
					order_id: order_id
				}).then(res=>{
					this.$utils.hideLoading();
					if(res.status){
						let index = this.result.findIndex((value)=>{
							return value.order_id == order_id;
						});
	
						this.result.splice(index,1);
						this.$utils.msg(res.info);
					}else{
						this.$utils.msg(res.info);
					}
				}).catch(err=>{
					this.$utils.hideLoading();
					this.$utils.msg("网络出错，请检查网络是否连接");
				});
			},
			downCallback(){
				setTimeout(()=>{
					this.mescroll.resetUpScroll();
				},1200);
			},
			triggerDownScroll(){
				this.mescroll.triggerDownScroll();
			},
			upCallback(page) {
				this.$http.getCzOrderList({
					type: this.activeId,
					page: page.num
				}).then((result)=>{
					this.mescroll.endByPage(result.data.list.length, result.data.total);
					if(result.status==1){
						if(page.num == 1) this.result = [];
						this.result = result.data.list;
					}else if(result.status == -1){
						this.mescroll.endErr();
					}
				}).catch(error=>{
					this.mescroll.endErr();
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.placeholder-box{
    width: 100%;
    height: 100rpx;
}
.addBorder{
    border-top: 2rpx solid #eee;
}
.menu{
    background-color: #78C0F9;
    height: 100rpx;
    line-height: 100rpx;
    position: fixed;
    width: 100%;
	font-size: 30rpx;
	z-index: 999999;
    .menu-wrap{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        text {
            flex: 1;
            text-align: center;
            position: relative;
            color: #fff;
        }
        .active {
            color: #fff000;
        }
    }
}
.list-wrap{
    margin-top: 20rpx;
}
.list-box{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    .list-item-box {
        width: 95%;
        margin: 20rpx 2.5%;
        background-color: #fff;
        border-radius: 12rpx;
        .top{
            height: 90rpx;
            line-height: 90rpx;
            font-size: 30rpx;
            border-bottom: 2rpx solid #eee;
            .order-type{
                font-size: 28rpx;
                margin-right: 10rpx;
                color: #666;
            }
            text:first-child{
                float: left;
                padding-left: 20rpx;
            }
            text:last-child{
                font-size: 28rpx;
                float: right;
                padding-right: 20rpx;
            }
        }
        .goods-box{
            padding: 0 20rpx;
            .goods-item {
                padding-top: 20rpx;
                .goods-img {
                    width: 154rpx;
                    height: 154rpx;
                    display: inline-block;
                    float: left;
                    image{
                        width: 100%;
                        height: 100%;
                    }
                }
                .goods-info {
                    display: inline-block;
                    width: 72%;
                    font-size: 28rpx;
                    float: right;
                    .t {
                        width: 100%;
                        height: 90rpx;
                        text:first-child{
                            float: left;
                            display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            width: 70%;
                        }
                        text:last-child{
                            width: 30%;
                            float: right;
                            text-align: right;
                        }
                    }
                    .b{
                        width: 100%;
                        height: 80rpx;
                        font-size: 26rpx;
                        text:first-child{
                            float: left;
                            color: #999;
                        }
                        text:last-child{
                            float: right;
                            color: #666;
                        }
                    }
                }
            }
        }
        .order{
            width: 100%;
            height: 90rpx;
            line-height: 90rpx;
            border-bottom: 2rpx solid #eee;
            .total {
				height: 90rpx;
				line-height: 90rpx;
                text-align: right;
                font-size: 28rpx;
                padding-right: 20rpx;
                view {
					display: inline-block;
                    color: red;
                    text{
                        font-style: normal;
                        font-size: 32rpx;
                    }
                }
            }
        }
        .botttom{
            width: 100%;
            height: 110rpx;
            line-height: 110rpx;
            text-align: right;
            text{
                font-size: 28rpx;
                text-align: center;
                border-radius: 30rpx;
                background-color: #fff;
                padding: 16rpx 30rpx;
                margin-right: 20rpx;
            }
            text.cancel{
                color: #333;
                border: 2rpx solid #ddd;
            }
            text.pay {
                background-color: #78C0F9;
                color: #fff;
            }
        }
    }
}
</style>